<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="统计周期" prop="cycle">
          <el-select v-model="queryForm.params.cycle" placeholder="统计周期" style="width: 100px;">
            <el-option
              v-for="(item, index) in queryForm.cycleList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="queryForm.dateName" prop="date">
          <!--   日   -->
          <el-date-picker
            style="width: 140px"
            v-if="queryForm.params.cycle == 0"
            v-model="queryForm.params.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日"
          ></el-date-picker>
          <!--   月   -->
          <el-date-picker
            v-if="queryForm.params.cycle == 1"
            v-model="queryForm.params.date"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          ></el-date-picker>
          <el-select
            v-if="queryForm.params.cycle == 2"
            v-model="queryForm.params.date"
            placeholder="选择季度"
            style="width: 100px;"
          >
            <el-option
              v-for="(item, index) in queryForm.dateList"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
          <!--   年   -->
          <el-date-picker
            v-if="queryForm.params.cycle == 3"
            v-model="queryForm.params.date"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
          <el-button type="success" @click="exportList">
            <d2-icon name="download" />导出
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          :form-options="formOptions"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import MyAreaTree from "@/components/my-area-tree";
export default {
  name: "page1",
  components: { MyAreaTree },
  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      queryForm: {
        params: {
          areaId: "",
          cycle: "0", // 统计周期
          date: "" // 时间
        },
        cycleList: [
          {
            name: "日",
            id: "0"
          },
          {
            name: "月",
            id: "1"
          },
          {
            name: "季",
            id: "2"
          },
          {
            name: "年",
            id: "3"
          }
        ],
        dateName: "",
        dateList: [
          { name: "第一季度", value: "0" },
          { name: "第二季度", value: "1" },
          { name: "第三季度", value: "2" },
          { name: "第四季度", value: "3" }
        ]
      },
      treeData: null,
      columns: [
        {
          title: "序号",
          key: "serialNum",
          width: "50px"
        },
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sortable: true
        },
        {
          title: "客户名称",
          key: "customerName",
          sortable: true
        },
        {
          title: "手机号码",
          key: "customerPhone",
          sortable: true
        },
        {
          title: "收费金额",
          key: "payfee",
          sortable: true
        },
        {
          title: "退费金额",
          key: "refundfee",
          sortable: true
        },
        {
          title: "实收金额",
          key: "pay",
          sortable: true
        },
        {
          title: "起始时间",
          key: "startTime",
          sortable: true
        },
        {
          title: "结束时间",
          key: "endTime",
          sortable: true
        }
      ],
      data: [],
      formOptions: {
        labelWidth: "80px",
        labelPosition: "left",
        saveLoading: false
      }
    };
  },
  watch: {
    "queryForm.params.cycle": {
      handler(val, oval) {
        if (val === 2 || val === "2") {
          this.queryForm.params.date = "0";
        } else {
          this.queryForm.params.date = "";
        }
        console.log(this.queryForm.cycleList);
        this.queryForm.dateName = `选择${this.queryForm.cycleList[val].name}`;
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.getAreaList().then(() => {
      this.getPageList()
    })
  },
  methods: {
    async exportList() {
      const res = await this.$api.finance_exportChargeBookExcel(
        this.queryForm.params
      );
      const url = window.URL.createObjectURL(new Blob([res]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "企业台账.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载完成移除元素
      window.URL.revokeObjectURL(url); // 释放blob对象
      console.log(res);
    },
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.getPageList();
    },
    onAreaChange(data, node) {
      this.queryForm.params.areaId = data.id;
      this.pagination.currentPage = 1;
      this.getPageList();
    },
    async getAreaList() {
      const res = await this.$api.admin_area_getList();
      this.treeData = util.getTree(res);
      return res;
    },
    // 获取企业台账列表
    async getPageList() {
      const res = await this.$api.finance_getChargeBookPageVO({
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ...this.queryForm.params
      });
      if (res && res.columns) {
        const { data } = res;
        this.data = data;
        this.pagination.total = res.total;
        this.loading = false;
      }
      return res;
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.getPageList();
    }
  }
};
</script>
